<template>
  <div id="search-title">
    <van-tabs v-model="count" line-height='0' title-active-color="red" @click="titleClick">
      <van-tab title="综合" name="0"></van-tab>
      <van-tab title="销量" name="1"></van-tab>
      <van-tab  name="2">
        <template #title>  
          价格
          <span class="title-icon" ref="span"></span>
          <i class="title-icon" ref="ii"></i>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name:"SearchTitle",
  data() {
    return {  
      count:0,
      sort:true
    }
  },
  methods: {
    titleClick(i){   
      console.log(i)
      this.active = i
       console.log(this.active)
      if(i == 2){
        this.sort = !this.sort
        if(this.sort){
          this.$refs.span.style.borderBottomColor = "#ccc"
          this.$refs.ii.style.borderTopColor = "#000"
        }else{
          this.$refs.span.style.borderBottomColor = "#000"
          this.$refs.ii.style.borderTopColor = "#ccc"
        }
        this.$emit("priceSort",this.sort)
      }
    }
  },
}
</script>

<style scoped>
  .title-icon{
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    position: relative;
  }
  span.title-icon{
    border-bottom-color:#ccc ;
    top: -8px;
  }
  i.title-icon{
    border-top-color:#000 ;
    top: 8px;
    left: -10px;
  }
</style>